/<template>
  <div class="list">
    <dl v-for="(item, index) in goods" :key="index">
      <dt>
        <img :src="item.img" />
      </dt>
      <dd>{{ item.title }}</dd>
      <dd>
        <span>{{ item.name }}</span>
        <span>{{ item.num }}</span>
      </dd>
    </dl>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      goods: [],
    };
  },
  mounted() {
    axios.get("/goods").then((res) => {
      console.log(res.data);
      this.goods = res.data;
    });
  },
};
</script>

<style lang="scss">
.list dl {
  width: 48%;
  height: 400px;
  background-color: rgb(220, 255, 255);
  float: left;
  margin-left: 2px;
  margin-bottom: 3px;
  dt img {
    width: 100%;
    height: 300px;
  }
  dd:nth-of-type(2) {
    margin-top: 30px;
    span:nth-of-type(1){
      margin-left: 10px;
    }
    span:nth-of-type(2){
      margin-left: 80px;
    }
  }
}
</style>